import React, { FC, useRef } from "react";
import styles from "./StaHeader.module.scss";
import {
  Button,
  Input,
  InputRef,
  Popover,
  Space,
  Tooltip,
  Typography,
  message,
} from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { LeftOutlined } from "@ant-design/icons";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import { isParameter } from "typescript";
const { Title } = Typography;
import { CopyOutlined, QrcodeOutlined } from "@ant-design/icons";
import QRCode from "qrcode.react";

const StaHeader: FC = () => {
  const nav = useNavigate();
  const { title } = useGetPageInfo();
  const { id } = useParams();
  const urlInputRef = useRef<InputRef>(null);
  function copy() {
    //拷贝
    const elem = urlInputRef.current; // 当前元素
    if (elem == null) return null;
    elem.select(); //选中input 内容
    document.execCommand("copy"); //拷贝选中的内容
    message.success("拷贝成功");
  }

  // url 二维码
  function genLinkAndRQCodeElem() {
    if (!isParameter) return null;
    const url = `192.168.1.6:8000/question/stat/${id}`; //拼接url 要参考c端url规则

    const QRCodeElem = (
      <div style={{ textAlign: "center" }}>
        <QRCode value={url} size={150}></QRCode>
      </div>
    );
    return (
      <div>
        <Space>
          <Input value={url} style={{ width: "300px" }} ref={urlInputRef} />
          <Tooltip title="拷贝链接">
            <Button icon={<CopyOutlined />} onClick={copy}></Button>
          </Tooltip>
          <Popover content={QRCodeElem}>
            <Button icon={<QrcodeOutlined />}></Button>
          </Popover>
        </Space>
      </div>
    );
  }

  return (
    <div className={styles["header-warpper"]}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Space>
            <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
              返回
            </Button>
            <Title>{title}</Title>
          </Space>
        </div>
        <div className={styles.main}>{genLinkAndRQCodeElem()}</div>
        <div className={styles.right}>
          <Button type="primary" onClick={() => nav(`/question/edit/${id}`)}>
            编辑
          </Button>
        </div>
      </div>
    </div>
  );
};

export default StaHeader;
